<template>
	<view>
		<!-- 搜索 -->
		<view class="search-box">
			<view class="dialog-modal">
				<view class="dialog-wrapper" v-show="isShowSearchModal" @click="onClose"></view>
				<transition name="drop">
					<view class="dialog-container" v-show="isShowSearchModal">
						<slot>
							<view class="content-bigbox">
								<view class="cu-form-group">
									<view class="title">企业名称</view>
									<input placeholder="请输入" name="input" v-model="postName" class="text-r"></input>
								</view>
								<view class="form-item cu-form-group">
									<view class="title">行业</view>
									<picker @change="businessChange" :value="index1" :range="business" range-key="name">
										<view class="picker">
											{{index1>0?business[index1].name:'请选择'}}
										</view>
									</picker>
								</view>
								<view class="form-item cu-form-group">
									<view class="title">客户状态</view>
									<picker @change="companyTypeChange" :value="index" :range="companyType" range-key="name">
										<view class="picker">
											{{index>0?companyType[index].name:'请选择'}}
										</view>
									</picker>
								</view>
								<view class="form-item cu-form-group">
									<view class="title">客户级别</view>
									<picker @change="companyLevelChange" :value="index2" :range="companyLevel" range-key="name">
										<view class="picker">
											{{index2>0?companyLevel[index2].name:'请选择'}}
										</view>
									</picker>
								</view>
								<view class="form-item cu-form-group">
									<view class="title">渠道来源</view>
									<picker @change="companyChannelChange" :value="index3" :range="companyChannel" range-key="name">
										<view class="picker">
											{{index3>0?companyChannel[index3].name:'请选择'}}
										</view>
									</picker>
								</view>
								<view class="btm-btn" @click="onClose">确定</view>
							</view>
						</slot>
					</view>
				</transition>
			</view>
		</view>
		<!-- 搜索 -->

		<!-- <view>
			<input type="text" placeholder="请输入企业名称" class="ipt" v-model='businessName'>
			<view class="form-item cu-form-group">
				<view class="title">行业</view>
				<picker @change="businessChange" :value="index1" :range="business" range-key="name">
					<view class="picker">
						{{index1>0?business[index1].name:'请选择'}}
					</view>
				</picker>
			</view>
			<view class="form-item cu-form-group">
				<view class="title">客户状态</view>
				<picker @change="companyTypeChange" :value="index" :range="companyType" range-key="name">
					<view class="picker">
						{{index>0?companyType[index].name:'请选择'}}
					</view>
				</picker>
			</view>
			<view class="form-item cu-form-group">
				<view class="title">客户级别</view>
				<picker @change="companyLevelChange" :value="index2" :range="companyLevel" range-key="name">
					<view class="picker">
						{{index2>0?companyLevel[index2].name:'请选择'}}
					</view>
				</picker>
			</view>
			<view class="form-item cu-form-group">
				<view class="title">渠道来源</view>
				<picker @change="companyChannelChange" :value="index3" :range="companyChannel" range-key="name">
					<view class="picker">
						{{index3>0?companyChannel[index3].name:'请选择'}}
					</view>
				</picker>
			</view>
		</view> -->


		<view class="scroll-v" v-if="searchList.length > 0">
			<block v-for="(items,index) in searchList" :key="index">
				<view class="company-item">
					<view class="company-info-view">
						<view class="flex rcb info-item">
							<view class="info-title">{{items.name}}</view>
							<view class="info-status">{{items.status_name}}</view>
						</view>
						<view class="flex rcb info-item">
							<view class="info-level">{{items.company_level_name}}</view>
						</view>
						<view class="flex rcb info-item">
							<view class="info-item-con flex-1 rcs">
								<text class="info-item-title">服务负责人：</text>
								<text class="info-item-text">{{items.services_user_name}}</text>
							</view>
							<view class="info-item-con flex-1 rcs">
								<text class="info-item-title">驻场负责人：</text>
								<text class="info-item-text">{{items.station_name_str}}</text>
							</view>
						</view>
						<view class="flex rcb info-item">
							<view class="info-item-con flex-1 rcs">
								<text class="info-item-title">创建人：</text>
								<text class="info-item-text">{{items.user_name}}</text>
							</view>
							<view class="info-item-con flex-1 rcs">
								<text class="info-item-title">创建时间：</text>
								<text class="info-item-text">{{items.create_time}}</text>
							</view>
						</view>
					</view>
					<view class="line-style horizontal-line" />
					<view class="btn-wrap flex rcb">
						<div class="btn-wrap-left flex rcs">
							<view class="btn-item flex rcc" @tap="deleteCompanyItem(items)">
								<image class="btn-icon" src="../../static/icon/icon_trash.png" mode="widthFix" />
								<text class="btn-title">删除</text>
							</view>
							<view class="btn-item flex rcc" @tap="handleClickChange(items)">
								<image class="btn-icon" src="../../static/icon/icon_edit.png" mode="widthFix" />
								<text class="btn-title">编辑</text>
							</view>
						</div>
						<div class="btn-wrap-right flex rce">
							<view class="btn-item btn-item-red flex rcc" @tap="handleClickDisable(items)" v-show="items.status > 0">
								<text class="btn-title">禁用</text>
							</view>
							<view class="btn-item flex rcc" @tap="handleClickStart(items)" v-show="items.status == 0">
								<text class="btn-title">启用</text>
							</view>
						</div>
					</view>
				</view>
			</block>
			<view class="loadStatus">{{loadStatus}}</view>
		</view>
		<loading v-else-if="firstload"></loading>
		<!-- 无内容默认 -->
		<no-thing v-else></no-thing>
		<view class="cu-modal show" v-if="showConfirm">
		    <view class="cu-dialog dialog-container">
		        <view class="cu-bar dialog-title-view flex rcb">
		            <view class="dialog-title-style">温馨提示</view>
		            <view class="dialog-btn-close" @tap="onPressCancel">
		                <text class="cuIcon-close"></text>
		            </view>
		        </view>
		        <view class="dialog-content-view flex ccc">
		            <view class="dialog-context flex ccc">确定要删除吗？</view>
		        </view>
		        <view class="cu-bar dialog-btn-wrap flex rcb">
		            <view class="btn-item btn-cancel-item flex ccc" @tap="onPressCancel">取消</view>
		            <view class="btn-item btn-submit-item flex ccc" @tap="onPressSubmit">确定</view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	import loading from "../../components/common/loading.vue";
	import noThing from "../../components/common/no-thing.vue";
	import CompanyItem from "../../components/item/company-item.vue";
	export default {
		components: {
			loading,
			noThing,
			CompanyItem,
		},
		data() {
			return {
				item_id: '',
				showConfirm: false,
				firstload: true,
				page: 1,
				token: '',
				loadStatus: "",
				// 行业
				business: [],
				index1: 0,
				// 客户状态
				companyType: [],
				index: 0,
				// 客户级别
				companyLevel: [],
				index2: 0,
				// 渠道来源
				companyChannel: [],
				index3: 0,
				// 后台提交得数据
				businessName: '', //企业名
				business_id: '', //行业id
				companyType_id: '', //客户状态id
				companyLevel_id: '', //客户级别id
				companyChannel_id: '', //渠道来源id

				// 接受后台传过来得列表
				searchList: [],
				isShowSearchModal: false,
			}
		},
		onReachBottom() {
			// console.log('_onLoadMore---->', '_onLoadMore');
			this.loadMore();
		},
		onLoad() {
			// uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			this._onRefresh();
			// console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 监听原生标题导航按钮点击事件
		onNavigationBarButtonTap(e) {
			switch (e.index) {
				case 0:
					this.onNavigate();
					break;
				case 1:
					this.isShowSearchModal = true;
					break;
			}
		},
		methods: {
			onNavigate() {
				uni.navigateTo({
					url: '/pages/publish/addBusiness'
				});
				this.businessName = '';
				this.business_id = '';
				this.companyType_id = '';
				this.companyLevel_id = '';
				this.companyChannel_id = '';
				this.index = 0;
				this.index1 = 0;
				this.index2 = 0;
				this.index3 = 0;
			},
			onClose() {
				this.isShowSearchModal = false;
				this._onRefresh();
			},
			onPressCancel() {
			    this.showConfirm = false;
			},
			async onPressSubmit() {
			    let url = this.ServicesApi.companyDelete;
			    let data = {
			        id: this.item_id,
			    };
			    let result = await this.Services.post(url, data);
			    if (result.code == this.StatusCode.SUCCESS_CODE) {
			        uni.showToast({
			            icon: 'none',
						title: result.msg,
			        });
			        this.showConfirm = false;
			        this._onRefresh();
			    } else {
			        uni.showToast({
			            icon: 'none',
			            title: result.msg,
			        });
			    }
			},
			//下拉刷新
			_onRefresh() {
				this.page = 1;
				this.getSearchList();
				// console.log('_onRefresh---->', '_onRefresh');
			},
			// 上拉加载
			async loadMore() {
				this.loadStatus = "加载中..."
				this.page++;
				// console.log(this.page)
				this.getToken();
				// 发请求
				let url = this.ServicesApi.companySearchList;
				let data = {
					page: this.page,
					limit: 10,
					name: this.businessName, //企业名称
					business_type: this.business_id, //行业类型
					company_type: this.companyType_id, //客户状态
					company_level: this.companyLevel_id, //客户等级
					company_channel: this.companyChannel_id, //渠道来源
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					let arr = result.data.data;
					this.searchList.push(...arr)
					if (arr.length < 10) {
						this.loadStatus = "没有更多数据"
					}
				} else {
					this.loadStatus = "没有更多数据"
				}
				// uni.request({
				// 	url: this.ServicesApi.companySearchList,
				// 	method: 'POST',
				// 	header: {
				// 		"content-type": "application/x-www-form-urlencoded"
				// 	},
				// 	data: {
				// 		token: this.token,
				// 		page: this.page,
				// 		limit: 10,
				// 		name: this.businessName, //企业名称
				// 		business_type: this.business_id, //行业类型
				// 		company_type: this.companyType_id, //客户状态
				// 		company_level: this.companyLevel_id, //客户等级
				// 		company_channel: this.companyChannel_id, //渠道来源
				// 	},
				// 	success: (res) => {

				// 		// console.log(res.data)
				// 		// this.searchList = res.data.data.data;
				// 		// this.taskList = res.data.data.data;
				// 		if (res.data.code == "0") {
				// 			this.loadStatus = "没有更多数据"
				// 		} else {
				// 			let arr = res.data.data.data;
				// 			this.searchList.push(...arr)
				// 		}
				// 	}
				// });
			},
			// 取token
			getToken() {
				try {
					const value = uni.getStorageSync('login_key');
					if (value) {
						this.token = value;
					}
				} catch (e) {
					// error
				}
			},
			// 搜索行业
			businessChange(e) {
				uni.hideKeyboard();
				this.index1 = e.detail.value;
				this.business_id = this.business[this.index1].id
			},
			// 搜索客户状态
			companyTypeChange(e) {
				uni.hideKeyboard();
				this.index = e.detail.value;
				this.companyType_id = this.companyType[this.index].id
			},
			// 搜索客户级别
			companyLevelChange(e) {
				uni.hideKeyboard();
				this.index2 = e.detail.value;
				this.companyLevel_id = this.companyLevel[this.index2].id
			},
			// 搜索渠道来源
			companyChannelChange(e) {
				uni.hideKeyboard();
				this.index3 = e.detail.value;
				this.companyChannel_id = this.companyChannel[this.index3].id
			},
			// 点击禁用
			async handleClickDisable(items) {
				this.getToken()
				// 发请求
				let url = this.ServicesApi.setInvalid;
				let data = {
					id: items.id,
					status: 0,
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					uni.showToast({
						icon: 'none',
						title: result.msg,
					});
					this.getSearchList();
				} else {
					uni.showToast({
						icon: 'none',
						title: result.msg,
					});
				}

				// uni.request({
				// 	url: this.ServicesApi.setInvalid,
				// 	method: 'POST',
				// 	header: {
				// 		"content-type": "application/x-www-form-urlencoded"
				// 	},
				// 	data: {
				// 		token: this.token,
				// 		id: items.id,
				// 		status: 0,
				// 	},
				// 	success: (res) => {
				// 		// console.log(res.data)
				// 		uni.showToast({
				// 			title: res.data.msg
				// 		});
				// 		this.getSearchList();
				// 	}
				// });
			},
			//点击启用
			async handleClickStart(items) {
				this.getToken()
				// 发请求
				let url = this.ServicesApi.setInvalid;
				let data = {
					id: items.id,
					status: 1,
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					uni.showToast({
						icon: 'none',
						title: result.msg,
					});
					this.getSearchList();
				} else {
					uni.showToast({
						icon: 'none',
						title: result.msg,
					});
				}

				// uni.request({
				// 	url: this.ServicesApi.setInvalid,
				// 	method: 'POST',
				// 	header: {
				// 		"content-type": "application/x-www-form-urlencoded"
				// 	},
				// 	data: {
				// 		token: this.token,
				// 		id: items.id,
				// 		status: 1,
				// 	},
				// 	success: (res) => {
				// 		// console.log(res.data)
				// 		uni.showToast({
				// 			title: res.data.msg
				// 		});
				// 		this.getSearchList();
				// 	}
				// });
			},
			// 点击新增企业跳转页面
			handleClickAddBusiness() {
				uni.navigateTo({
					url: "/pages/publish/addBusiness"
				})
			},

			// 点击编辑跳转页面传参数
			async deleteCompanyItem(items) {
				this.item_id = items.id;
				this.showConfirm = true;
				return;
				// 发请求
				uni.showModal({
					title: '温馨提示',
					content: '确认要删除吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: async res => {
						if (res.confirm) {
							let url = this.ServicesApi.companyDelete;
							let data = {
								id: items.id,
							};
							let result = await this.Services.post(url, data);
							if (result.code == this.StatusCode.SUCCESS_CODE) {
								this._onRefresh();
								uni.showToast({
									icon: 'none',
									title: result.msg
								});
							} else {
								uni.showToast({
									icon: 'none',
									title: result.msg
								});
							}

						} else if (res.cancel) {

						}
					}
				});
			},
			// 点击编辑跳转页面传参数
			handleClickChange(items) {
				let listId = items.id
				uni.navigateTo({
					url: "/pages/publish/addBusiness?id=" + listId
				})
			},
			// 请求企业列表筛选条件
			async getSearchWhere() {
				// this.getToken()
				// 发请求
				let url = this.ServicesApi.searchWhere;
				let data = {
					num: 0,
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					this.business = result.data.business_type;
					this.companyType = result.data.company_type;
					this.companyLevel = result.data.company_level;
					this.companyChannel = result.data.company_channel;
				}
				// uni.request({
				// 	url: this.ServicesApi.searchWhere,
				// 	method: 'POST',
				// 	header: {
				// 		"content-type": "application/x-www-form-urlencoded"
				// 	},
				// 	data: {
				// 		token: this.token,
				// 		num: 0,
				// 	},
				// 	success: (res) => {
				// 		// console.log(res.data.data)
				// 		this.business = res.data.data.business_type;
				// 		this.companyType = res.data.data.company_type;
				// 		this.companyLevel = res.data.data.company_level;
				// 		this.companyChannel = res.data.data.company_channel;
				// 	}
				// });
			},
			// 请求列表
			async getSearchList() {
				this.getToken()
				// 发请求
				let url = this.ServicesApi.companySearchList;
				let data = {
					page: this.page,
					limit: 10,
					name: this.businessName, //企业名称
					business_type: this.business_id, //行业类型
					company_type: this.companyType_id, //客户状态
					company_level: this.companyLevel_id, //客户等级
					company_channel: this.companyChannel_id, //渠道来源
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					this.business = result.data.business_type;
					this.searchList = result.data.data;
					this.firstload = false;
				} else {
					this.firstload = false;
					uni.stopPullDownRefresh();
				}
				// uni.request({
				// 	url: this.ServicesApi.companySearchList,
				// 	method: 'POST',
				// 	header: {
				// 		"content-type": "application/x-www-form-urlencoded"
				// 	},
				// 	data: {
				// 		token: this.token,
				// 		page: this.page,
				// 		limit: 10,
				// 		name: this.businessName, //企业名称
				// 		business_type: this.business_id, //行业类型
				// 		company_type: this.companyType_id, //客户状态
				// 		company_level: this.companyLevel_id, //客户等级
				// 		company_channel: this.companyChannel_id, //渠道来源
				// 	},
				// 	success: (res) => {
				// 		// console.log('列表啊',res.data.data.data);

				// 		if (res.data.code == 1) {
				// 			this.searchList = res.data.data.data;
				// 			this.firstload = false;
				// 		} else {
				// 			this.firstload = false;
				// 			uni.stopPullDownRefresh();
				// 		}
				// 	}
				// });
			}
		},
		mounted() {
			this.getSearchWhere();
			this.getSearchList();
		},
		onShow: function(e) {
			// #ifndef H5
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1];
			if (currPage.data && currPage.data.isDoRefresh == true) {
				currPage.data.isDoRefresh = false;
				// console.log('s刷新');
				this._onRefresh();
			} else {
				//不用刷新
			}
			// #endif
			// #ifdef H5
			this._onRefresh()
			// #endif
		}
	}
</script>

<style scoped lang="stylus">
	.loadStatus {
		height: 60upx;
		text-align: center;
		color: #ccc;
		font-size: 30upx;
		// background:pink;
		// margin-top:-30upx;
		line-height: 60upx;
		margin-bottom: 20upx;
	}

	.scroll-v {
		height: 100vh;
	}

	.btm-btn {
		height: 100upx;
		width: 300upx;
		margin: 0 auto;
		background: #00AAE3;
		color: #fff;
		text-align center;
		line-height 100upx;
	}

	.btn-change {
		color #fff;
		height: 40upx;
		width: 100upx;
		text-align: center;
		line-height: 40upx;
		background: #0081FF
	}

	.addBusiness {
		height: 100upx;
		width: 300upx;
		margin: 30upx auto;
		font-size 28upx;
		text-align: center;
		line-height 100upx;
		background: #0081FF;
		color: #fff;
	}

	.ipt {
		height: 70upx;
		width: 500upx;
		background: #D9D9D9;
	}

	.list {
		margin: 30upx 0;
		background: #fff;
		padding: 20upx;

		.list-box {
			justify-content: space-between;
			margin: 20upx 0;
		}
	}


	.status-title {
		font-size: 28upx;
		color: #666666;
		margin-right: 8upx;
	}

	.status-status {
		font-size: 28upx;
		color: #327ED6;
	}

	.set-bottom {
		margin-bottom: 20upx;
	}

	.situation1 {
		.taskdetail-top {
			background: #fff;
			padding: 40upx;

			.taskdetail-box1 {
				height: 164upx;
				align-items: center;
				justify-content: space-between;

				.task-title {
					font-size: 40upx;
					font-weight: 500;
					color: #333;
				}

				.task-todo {
					font-size: 28upx;
					color: #666;
					margin-top: 20upx;
				}

				.task-state {
					height: 46upx;
					width: 144upx;
					border: 2upx solid #5BBD00;
					font-size: 28upx;
					color: #5BBD00;
					font-weight: 500;
					line-height: 46upx;
					text-align: center;
				}

				//第二种情况
				.task-state1 {
					height: 46upx;
					width: 144upx;
					border: 2upx solid #999;
					font-size: 28upx;
					color: #999;
					font-weight: 500;
					line-height: 46upx;
					text-align: center;
				}
			}

			.taskdetail-box2 {
				height: 176upx;
				margin-bottom: 40upx;
				justify-content: space-around;
				align-items: center;
				background: linear-gradient(270deg, rgba(250, 250, 250, 1) 0%, rgba(243, 243, 243, 1) 100%);

				.task-numbox {
					text-align: center;

					.task-num1 {
						font-size: 36upx;
						font-weight: 500;
						color: #333;
					}

					.task-num2 {
						font-size: 36upx;
						color: #4A90E2;
						font-weight: 500;
					}

					.tast-titlenum {
						font-size: 28upx;
						color: #666;
						margin-top: 16upx;
					}
				}

			}

			.taskdetail-box3 {
				// justify-content:space-between;
				margin-bottom: 20upx;

				.detail-title {
					font-size: 28upx;
					color: #999;
				}

				.detail-detail {
					margin-left: 20upx;
					font-size: 28upx;
					color: #333;
				}
			}

		}

		.btm-items {
			height: 90upx;
			border-top: 2upx solid #DBDBDB;
			background: #fff;
			justify-content space-around;
			align-items: center;

			.item {
				border-right: 2upx solid #dbdbdb;
				width: 250upx;
				text-align: center;
				font-size: 28upx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);

				.item-img {
					height: 26upx;
					width: 26upx;
					margin-right: 10upx;
				}
			}

			.item-last {
				border: 0;
			}
		}
	}

	.company-item {
		margin-top: 20rpx;
		background: #FFFFFF;
		padding: 20rpx 30rpx;

		.company-info-view {
			.info-title {
				color: #333333;
				font-size: 32rpx;
			}

			.info-status {
				color: #016beb;
				font-size: 24rpx;
				padding: 2rpx 20rpx;
				background: #f3f3f3;
			}

			.info-level {
				color: #FFFFFF;
				margin: 20rpx 0;
				font-size: 26rpx;
				padding: 2rpx 20rpx 2rpx 10rpx;
				background-image: url('~@/static/img/img_bg_com_level.png');
				background-repeat: no-repeat;
				background-size: auto 100%;
				background-position: right center;
			}

			.info-item-con {
				margin: 6rpx 0;

				.info-item-title {
					color: #666666;
					font-size: 24rpx;
					margin-right: 10rpx;
				}

				.info-item-text {
					color: #333333;
					font-size: 24rpx;
				}
			}
		}

		.horizontal-line {
			margin: 20rpx 0;
		}

		.btn-wrap {
			.btn-item {
				.btn-icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}

				.btn-title {
					color: #333333;
					font-size: 26rpx;
				}
			}

			.btn-wrap-left {
				.btn-item {
					margin-right: 20rpx;
				}
			}

			.btn-wrap-right {
				.btn-item {
					margin-left: 20rpx;
					padding: 4rpx 20rpx;
					border: 2rpx solid #dbdbdb;

					.btn-title {
						color: #F5A623;
					}
				}

				.btn-item-red {
					border-color: #FF0000;

					.btn-title {
						color: #FF0000;
					}
				}
			}
		}
	}

	.search-box {
		.search-inp {
			align-items: center;
			margin-bottom: 30upx;

			.inp {
				height: upx;
				width: 582upx;
				background: #F3F3F3;
			}

			.search {
				font-size: 30upx;
				color: #4A90E2;
				margin-left: 28upx;
			}
		}

		.content-bigbox {
			padding: 42upx 40upx;

			.content1 {
				justify-content space-between;
				margin-bottom: 30upx;

				.text-box {
					height: 50upx;
					width: 130upx;
					background: #F3F3F3;
					font-size: 28upx;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
					justify-content: space-between;
					// padding:0 8upx 0 18upx;
					padding-left: 18upx;
					align-content center;
					align-items: center;
				}

				.te1 {
					width: 282upx;

				}

				.te2 {
					width: 282upx;
					margin-right: 90upx;
				}

				.overflow {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 310upx;
				}

				.te3 {
					width: 172upx;

				}

				.te4 {
					width: 210upx;
				}

				.te5 {
					width: 210upx;
					margin-right: 230upx;
				}
			}

			.btm-btn {
				height: 80upx;
				width: 670upx;
				margin: 50upx auto 0;
				background: linear-gradient(90deg, rgba(74, 144, 226, 1) 0%, rgba(0, 102, 220, 1) 100%);
				border-radius: 2upx;
				text-align center;
				line-height 80upx;
				font-size: 32upx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
		}

		.dialog-modal {
			position: absolute;
			z-index: 10000;
		}

		.dialog-wrapper {
			position: fixed;
			height: 100%;
			width: 100%;
			z-index: 5;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
		}

		.dialog-wrapper {
			background-color: #000;
			opacity: 0.2;
		}

		.dialog-container {
			position: fixed;
			z-index: 80;
			top: 0;
			left: 0;
			width: 100%;
			min-height: 344upx;
			background-color: #fff;

		}

		span.close-btn {
			padding: 5px 10px;
			float: right;
			cursor: pointer;
			font-size: 16px;
			font-weight: bold;
		}
	}
</style>
